<template>
	<view class="_area_card" :style="{
		marginTop: top + 'px'
	}">
		<view class="u-flex u-flex-between u-flex-items-center "  :style="{
		marginBottom: bottom + 'px'
	}">
			<view class="left-img" v-if="icon">
				<image :src="icon" style="height: 18px;width: auto;" mode="heightFix"></image>
			</view>
			<view class="_top_title" v-else>
				<view class="_left"></view>
				<view class="_right">{{ props.title }}</view>
			</view>
			<block v-if="more">
				<up-icon name="arrow-right" color="#999" labelColor="#999" :labelSize="12" :size="10" labelPos="left"
					label="查看全部" @click="moreData"></up-icon>
			</block>
		</view>
		<slot />
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue';
	const emit = defineEmits(['moreData'])
	const props = defineProps({
		bottom: {
			type: Number,
			default: 0,
		},
		top: {
			type: Number,
			default: 16,
		},
		more: {
			type: Boolean,
			default: false,
		},
		icon: {
			type: String,
			default: ''
		},
		title: String,
	})

	const moreData = () => {
		// 处理更多数据点击事件
		emit('moreData')
	}
</script>

<style lang="scss" scoped>
	._area_card {

		._top_title {
			display: flex;
			align-items: center;

			._left {
				width: 3px;
				height: 15px;
				background-color: rgba(32, 128, 247, 1);
				border-radius: 12px;
			}

			._right {
				margin-left: 8px;
				font-size: 16px;
				color: #333333;
				line-height: 19px;
				text-align: left;
				font-weight: bold;
			}
		}
	}
</style>